<template>
	<div class="wa_view">
		<van-nav-bar :border="false" title="系统公告" left-arrow @click-left="onClickLeft" />
		
		<div style="width: 100%;height: .17rem;background-color: rgb(251,251,251);"></div>
		
		<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			<!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
			
			</van-list> -->
			<div  v-if="SysteMsgData.length > 0">
				<div @click="goUrl('MessageContent',item.id)"  class="wv_item" v-for="item,index in SysteMsgData" :key="index">
					<div class="wi_left">
						<img class="a_ggico" :src="myApp.srcPath('sytem-msg.png')" alt="">
						<div class="wil_right">
							<span>{{item.title}}</span>
							
							<div style="display: flex;align-items: center;margin-top: .1rem;">
								<van-icon size="12" color='#CAD3D8' name="clock-o" />
								<p>{{dateFormat('yy年 mm月 dd日 hh:ii:ss',item.create_time)}}</p>
							</div>
						</div>
					</div>
					<van-icon name="arrow"  size="12" color='#CAD3D8'/>
				</div>
			</div>
			
			<div v-if="SysteMsgData.length <= 0">
				<img style="width: 1.5rem;height: 1.2rem; display: block;margin: auto;margin-top: 1rem;margin-bottom: 100%;" :src="myApp.srcPath('zanwu.png')" alt="">
			</div>
			
		</van-pull-refresh>
	</div>

</template>

<script>
	import Vue from 'vue';
	import {
		NavBar,
		Toast,
		List,
		PullRefresh,
		Icon
	} from 'vant';

	Vue.use(NavBar);
	Vue.use(List);
	Vue.use(PullRefresh);
	Vue.use(Icon);

	//请求
	import {
		SysteMsg
	} from '../serve/api.js'

	//时间戳转换
	import {dateFormat} from '../utils/dateTime.js'

	export default {
		created() {

			this.SysteMsg()

		},
		data() {
			return {

				list: [],
				
				//上拉到底的加载动画  true的时候显示加载完成
				loading: false,
				
				//是否已加载完成
				finished: false,
				
				//下拉刷新动画
				refreshing: false,

				SysteMsgData:""
			}
		},

		methods: {
			goUrl(url,id){
				
				// console.log("giao草",id)
				
				this.$router.push({ name:url, query:{id:id}})
				
			},
			
			//时间戳转换
			dateFormat(fmt, timestamp){
				
				return dateFormat(fmt, timestamp)
				
			},
			
			onLoad() {
				setTimeout( () => {
					
					//设置刷新动画消失
					this.refreshing = false;
					
				},1000)
				
			},
			onRefresh() {
				
				// console.log("我触发了刷新")
				
				// 清空列表数据
				this.finished = false;

				// 重新加载数据
				// 将 loading 设置为 true，表示处于加载状态
				this.loading = true;
				this.onLoad();
			},
			SysteMsg() {

				let params;

				SysteMsg(params, (res) => {

					// console.log(res)

					if(res.data.code == 1){
						
						// Toast("获取成功")
						
						this.SysteMsgData = res.data.data
						
					}

					

				}, (error) => {

				})

			},
			onClickLeft() {
				// Toast('返回');
				this.$router.go(-1)

			}
		},
	};
</script>

<style scoped="">
	.a_ggico{
		width: .8rem;
		height: .8rem;
		margin-right: .23rem;
	}
	
	.wil_right p{
		margin-left: .06rem;
		font-size: .22rem;
		color: #CAD3D8;
	}
	
	.wil_right span{
		color: #333;
		font-size: .3rem;
	}
	
	.wil_right{
		display: flex;
		flex-direction: column;
	}
	
	.wi_left{
		display: flex;
		align-items: center;
	}
	
	.wv_item{
		margin: auto;
		margin-top: .1rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: .25rem .3rem;
		box-sizing: border-box;
		background-color: white;
		width: 7.1rem;
	}
	
	.wi_iptViews input {
		margin-left: .35rem;
	}

	.wi_iptViews {
		padding: .3rem 0rem;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		font-size: .24rem;
		border-bottom: 1px solid #F1F1F1;
	}

	.wq_bot {
		text-align: center;
		margin-top: .16rem;
		color: #999999;
		font-size: .24rem;
		margin-bottom: 1rem;
	}

	.w_qr {
		margin: auto;
		width: 3.8rem;
		height: .66rem;
		background: rgba(29, 88, 255, 1);
		border-radius: .33rem;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: .32rem;
		margin-top: 1.96rem;
	}

	.wit_left img {
		width: .87rem;
		height: .52rem;
		margin-right: .39rem;
	}

	.wit_view {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: .61rem;
	}

	.wit_left {
		font-size: .28rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.w_sxf {
		font-size: .24rem;
		color: #999;
		margin-top: .3rem;
	}

	.wi_itpView input::placeholder {
		color: rgb(241, 241, 241);
	}

	.wi_itpView input {
		width: 60%;
		font-size: .72rem;
	}

	.wi_itpView {
		border-bottom: 1px solid #F1F1F1;
		padding: .3rem .21rem .3rem 0rem;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #1D58FF;
		font-size: .24rem;
	}

	.wi_title {
		font-size: .32rem;
	}

	.w_itemt {
		margin-top: .17rem;
		padding: .46rem .41rem .3rem .41rem;
		box-sizing: border-box;
		background-color: white;
	}

	.w_top img {
		width: 2.1rem;
		height: 1.47rem;
		margin-bottom: .32rem;
	}

	.w_top {
		display: flex;
		flex-direction: column;
		background-color: white;
		align-items: center;
		color: #1D58FF;
		font-size: .28rem;
		padding-bottom: .56rem;
		padding-top: .48rem;
	}

	.uploadDiv input {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.uploadDiv {
		position: relative;

	}

	.su_view {
		font-size: .28rem;
		padding: 0rem 0.25rem;
		box-sizing: border-box;
	}

	.su_item {
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: .25rem .25rem;
		box-sizing: border-box;
	}

	.su_item img {
		width: 1.12rem;
		height: 1.12rem;
	}

	.su_itemt {
		padding-top: .5rem;
	}

	.wa_view {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #FBFBFB;
		overflow: auto;
	}
</style>
